@use '../everything' as *;

@include styles;

:root {
  #{--code-color}: #{$pink-600};
  #{--sass-bg}: #{$grey-200};
  #{--sass-border}: #{$grey-400};
}

.dark-theme {
  @include use-dark-theme;

  #{--code-color}: #{$pink-400};
  #{--sass-bg}: #{rgba($black, 0.42)};
  #{--sass-border}: #{rgba($black, 0.87)};
}

.iframe {
  border: 0;
  border-radius: 0.25rem;
  height: 32rem;
  margin: 2rem auto;
  overflow: hidden;
  width: 100%;
}

.heading {
  @include phone-media {
    // decrease font size and line-height so it can fit on mobile screens. this
    // should match the size in Markdown.module.scss
    &.rmd-typography--headline-2 {
      // TODO: This mixin has been removed and must manually be updated.
      @include rmd-typography-value(headline-4, font-size, line-height);
    }
  }

  @include tablet-media {
    margin-left: -1em;
    padding-left: 1em;
  }

  position: relative;

  &:hover .heading__link {
    opacity: 1;
  }

  &--no-margin-top {
    margin-top: 0;
  }

  &--small-margin {
    margin-bottom: 0.5em;
    margin-top: 0.25em;
  }

  &__link {
    @include icon-use-var(color);
    // TODO: This mixin has been removed and must manually be updated.
    @include rmd-states-focus-shadow;
    // TODO: This mixin has been removed and must manually be updated.
    @include rmd-utils-hide-focus-outline;
    @include desktop-media {
      display: block;
    }

    display: none;
    left: 0;
    opacity: 0;
    position: absolute;
    text-decoration: none;
    transition: opacity $linear-duration;

    &::before {
      // TODO: This mixin has been removed and must manually be updated.
      @include rmd-states-surface-base;

      margin: -0.25rem;
    }

    &:hover,
    &:focus {
      text-decoration: underline;
    }

    &:focus {
      opacity: 1;
    }
  }

  &__toc {
    margin-bottom: 0.25em;

    + ul {
      margin: 0;
      padding-bottom: 2em;

      p {
        margin: 0;
      }

      a,
      li {
        // TODO: This mixin has been removed and must manually be updated.
        @include rmd-typography(headline-6);
      }
    }
  }
}

